<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日日记</title>
    <style>
        input:focus{
            border: 1px solid rgb(151, 171, 235);
        }
        input{
            outline: none;
            margin: 0;
            padding: 0;
            padding: 0 5px;
            display: inline-block;
            height: 33px;
            border: 1px solid rgb(223, 223, 223);
            box-sizing: border-box;
        }
        a,
        button{
            background-color: rgb(240,240,240);
            line-height: 32px;
            vertical-align: middle;
            text-decoration: none;
            margin: 0;
            padding: 0 15px;
            display: inline-block;
            height: 33px;
            border: 1px solid rgb(223, 223, 223);
            box-sizing: border-box;
        }
        .container{
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
        }
        .nav{
            padding:10px 0;
            background-color: rgb(223, 223, 223);
        }
        .list{
            flex: 1;
            overflow-y: scroll;
            padding-top: 10px;
        }
        
        .item .time{
            width: 193px;
            min-width: 193px;
            background-color: rgb(255 148 148);
            padding-left: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .item .content{
            width: calc(100% - 193px);
            word-break: break-all;
            padding:10px 0;
        }
        a:hover,
        button:hover{
            cursor: pointer;
            background-color: rgb(77, 115, 241);
            color: #fff;
        }
        .mask{
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background-color: #ffffff;
            z-index: 99999;
        }

    </style>
</head>
<body>
    <!-- <form action="?s=/index/upload" enctype="multipart/form-data" method="post">
        <input type="file" name="image" id="">
        <input type="submit" value="upload">
    </form> -->
    <div id="app">
        <div class="mask" v-show="mask"></div>
        <!-- {{ message }} -->

        <div class="container">
            <div class="nav">
                &nbsp;
                当前页 <input type="number" step="1" style="width:
                100px"  min="1" v-model="page"> 
                &nbsp;
                每页数量 <input type="number" step="1" style="width:
                100px"  min="1" v-model="pagesize">
                &nbsp;
                最大页数 <input readonly type="number" style="width:
                100px" step="1" v-model="maxpage">
                &nbsp;
                搜索 <input type="text" v-model="keyword">
                &nbsp;
                <button @click="search">搜索</button>
                &nbsp;
                <a href="?s=/index/edit">查看当天</a>&nbsp;
                总数：{{ count }}
            </div>
    
            <div class="list">
                <div class="list2">
                    <div class="item" v-for="item in list">
                        <div class="time" :title="item.add_time2">{{item.add_time}}</div>
                        <div class="content" v-html="item.content"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
    </div>

    <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    
    function get(url){
        return new Promise((resolve,reject)=>{
            let xhr = new XMLHttpRequest();
            xhr.open("GET",url)
            xhr.responseType="json"
            xhr.addEventListener("loadend",(ev)=>{
                if(xhr.readyState==4){
                    resolve(xhr.response)
                }
            })
            xhr.send()
        })
    }

    createApp({
        data() {
            return {
                mask:true,
                maxpage:0,
                pagesize:20,
                count:0,
                page:1,
                keyword:"",
                message: 'Hello Vue!',
                list:[
                    {
                        content:"1<br/>123213<br/>asdasdsaasdas21",
                        add_time:"2023-05-12 00:00:00"
                    },
                    {
                        content:"2",
                        add_time:"2023-05-12 00:00:00"
                    },
                    {
                        content:"3",
                        add_time:"2023-05-12 00:00:00"
                    },
                ]
            }
        },
        methods:{
            net_list(){
                get("?s=/index/list&page="+this.page+"&pagesize="+this.pagesize+"&keyword="+this.keyword).then(v=>{
                    this.count=v.count
                    this.maxpage = v.maxpage
                    this.list=v.list
                    this.mask=false
                })
            },
            search(){
                this.net_list()
            }
        },
        mounted(){
            this.net_list()
        }

    }).mount('#app')
    </script>
</body>
</html>